<template>
    <div class="flex flex-col h-full">
        <div class="py-2 shrink-0">
            <Topbar />
        </div>
        <div class="overflow-hidden grow">
            <UpPullLoad @trigger="loadMore">
                <Category />
                <MyCircle />
                <Topic />
                <DynamicCategory/>
                <Dynamic :data="dynamics"/>
            </UpPullLoad>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import Category from './components/category.vue'
import MyCircle from './components/myCircle.vue'
import Topic from './components/topic.vue';
import DynamicCategory from './components/dynamicCategory.vue'
const dynamics = ref([{
    goods:[1]
}]);
const loadMore = ({ done }: any) => {
    setTimeout(() => {
        dynamics.value.push({
            goods:[1,2,3]
        })
        done()
    }, 200);
}

defineOptions({
    name: 'community'
})
onActivated(()=>{
    console.log('circle actived')
})
</script>


<style scoped lang="scss">
:deep(.search) {
    @apply bg-gray-100;

    .search-text {
        @apply text-gray-500;
    }
}

:deep(.search-icon) {
    @apply text-gray-500;
}
</style>